<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点样式</title>
</head>

<style>
    .box {
        width: 100px;
        height: 100px;
        border: 1px solid;
        border-radius: 9px;
    }

    .success{
        background-color: greenyellow;
    }


    .danger{
         background-color: red;
    }

    .sty2{

    }

</style>

<body>

<div>
    dd
</div>


</body>

<script>

    var box = document.getElementsByTagName('div')[0];

    // // style 不适合修改比较复杂的样式
    // box.style.color = 'red';
    // box.style.width = '100px';
    // box.style.height = '100px';
    // box.style.border = '1px solid'
    //....


     //box.className ='box';
     box.classList.add('box');
     box.classList.add('success');
     box.classList.remove('success');
     box.classList.add('danger');



</script>
</html>